<template>
  <div class="book_shop">
    <div class="firstLoading" v-if="!showLoading">
      <van-loading
        size="30px"
        text-size="30px"
        text-color="#adadad"
      />Loding....
    </div>
    <!-- 搜索框内容 -->
    <!-- 弹出搜索页面 -->
    <search-com
      v-if="searchShow"
      @change-search-show="changesearchShow"
    ></search-com>
    <van-popup :overlay="true" v-model="showProp" :duration="0.5">
      <rotate-card :showProp="showProp" :sex="sex"></rotate-card>
    </van-popup>
    <div class="search_bar">
      <div class="sex">
        <div @click="showPopup">
          <span
            :class="['iconfont', sex == 'male' ? 'icon-nan' : 'icon-nv']"
            @click="sex = sex == 'female' ? 'male' : 'female'"
          ></span>
        </div>
      </div>

      <div class="input">
        <span class="fdj iconfont icon-Magnifier"></span>
        <input type="text" readonly @click="searchShow = true" />
      </div>
    </div>

    <!-- 标签页 -->
    <van-tabs v-model="blockName" :line-width="14" :line-height="2">
      <van-tab title="精选" name="精选" @click="blockName = '精选'">
        <!-- 轮播图 -->
        <swiper-com :banners="banners"></swiper-com>

        <!-- 轮播图下面的5个标签 -->
        <div class="rank">
          <div class="ranking_btn">
            <router-link
              tag="div"
              v-for="sort in shortCut"
              :key="sort.msgId"
              :to="{ name: 'ranking' }"
              class="box"
            >
              <div class="img">
                <img alt="" v-lazy="sort.cover" />
              </div>
              <p>{{ sort.name }}</p>
            </router-link>
          </div>
        </div>
        <!-- 人气no1复用组件人气标题 -->
        <com-layer :recommend="NunmberOne">人气NO.1-本周爆款来了</com-layer>

        <!-- 复用一周强推 -->
        <com-layer-a
          :recommendBig="weekRecommend"
          :recommendSmall="weekRecommends"
          >本周强推</com-layer-a
        >
      </van-tab>
      <van-tab title="免费" name="免费" @click="blockName = '免费'"
        >内容 2</van-tab
      >
      <van-tab title="男生" name="男生" @click="blockName = '男生'"
        >内容 3</van-tab
      >
      <van-tab title="女生" name="女生" @click="blockName = '女生'"
        >内容 3</van-tab
      >
      <van-tab title="出版" name="出版" @click="blockName = '出版'"
        >内容 3</van-tab
      >
      <van-tab title="听书" name="听书" @click="blockName = '听书'"
        >内容 3</van-tab
      >
    </van-tabs>
  </div>
</template>
<script>
import SwiperCom from "../../components/banners/SwiperCom.vue";
import ComLayer from "../../components/common/ComLayer.vue";
import ComLayerA from "../../components/common/ComLayerA.vue";
import RotateCard from "../../components/common/RotateCard.vue";
import SearchCom from "../../components/common/SearchCom.vue";
import { getBookShop } from "../../api/bookshop";
export default {
  components: { SwiperCom, ComLayer, ComLayerA, RotateCard, SearchCom },
  data() {
    return {
      //
      showLoading: false,
      // vant标签页title
      blockName: "精选",
      // 轮播图
      banners: [],
      // 男女性别
      sex: "male",
      // 展示弹窗
      showProp: false,
      // 定时器
      timer: null,
      // 搜索页面的展示
      searchShow: false,
      //轮播图下面的五个卡片
      shortCut: [],
      // 一周强推
      // 大图 小图
      weekRecommend: [],
      weekRecommends: [],
      //人气no.1
      NunmberOne: [],
    };
  },
  created() {
    this.getBookShopFun();
  },
  methods: {

    //1.获取到导航栏接口的数据然后在获取url
    // 2.在通过每个导航的url去获取当页的数据
    // 3.该页的渲染的组件由模块的数字决定按顺序渲染
  
    //获取首页数据库
    getBookShopFun() {
      getBookShop().then(({ data: res }) => {
        this.banners = res.data.list[0].banners;
        this.shortCut = res.data.list[1].shortCut;
        this.weekRecommends = res.data.list[2].list.slice(1, 5);
        this.weekRecommend = res.data.list[2].list[0];
        this.NunmberOne = res.data.list[3].list;
        this.showLoading = true;
      }).catch((err)=>{
        if(err){
          this.$toast({
            message:'服务器崩溃',
            position:'middle'
          })
        }
      });
    },
    //搜索组件展示
    changesearchShow() {
      this.searchShow = false;
    },
    //男女弹出框
    showPopup() {
      this.showProp = true;
      if (this.timer) {
        clearTimeout(this.timer);
        this.timer = null;
      } else {
        this.timer = setTimeout(() => {
          this.showProp = false;
          clearTimeout(this.timer);
          this.timer = null;
        }, 2000);
      }
    },
  },
  beforeDestroy() {
    clearTimeout(this.timer);
    this.timer = null;
  },
};
</script>

<style lang="less" scoped>
.firstLoading {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 500;
  display: flex;
  justify-content: center;
  align-items: center;
}
.book_shop {
  // 搜索框内容
  .search_bar {
    display: flex;
    padding: 13px;
    .sex {
      flex: 0 0 25px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      .iconfont {
        font-size: 17px;
        color: #459ef5;
        &.icon-nv {
          color: #f66756;
        }
      }
    }
    .input {
      position: relative;
      flex: 1;
      width: 100%;
      .fdj {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
      }
      input[type="text"] {
        height: 25px;
        width: 100%;
        border-radius: 12px;
        color: #c3c3c3;
        background-color: #fff;
        border: 0;
        padding: 0 30px;
        box-sizing: border-box;
      }
      margin: 0 4px;
    }
  }
  // 标签页
  /deep/ .van-tabs {
    .van-tab__text {
      color: #bababa;
      font-size: 13px;
    }
    .van-tab--active {
      .van-tab__text {
        font-size: 18px;
        color: #4e4e4e;
      }
    }
  }
  // 轮播图下面的5个标签
  .rank {
    .ranking_btn {
      border-bottom: 1px solid #eeeeee;
      padding: 13px 60px;
      display: flex;
      justify-content: space-between;
      .box {
        width: 30px;
        height: 50px;
        .img {
          width: 30px;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 30px;
            height: 30px;
          }
        }
        p {
          font-size: 13px;
          color: #5f5f5f;
          margin-top: 5px;
          text-align: center;
        }
      }
    }
  }
}
</style>